<template>
    <div class="form-box">
        <div class="form-main">
            <div class="form-left">
                <div class="title">
                    知行互联管理端
                </div>
              
            </div>
            <div class="form-reght">
               
                <div class="form-content">
                    <div class="granter" >
                        <div style="padding-bottom: 5px; cursor:pointer;" :class="{'is-active ':(granter.active==index)}" v-for="(type,index) in granter.types" :key="index" @click="changeGranterType(index)">
                           
                            {{ type.text }}
                        </div> 
                    </div>

                    <login-form :granter="granter.types[granter.active].name"/>
                    <div class="forget">
                        <div class="forget-username">
                            <!-- 忘记账号 -->
                        </div>
                        <div class="forget-password"  @click="$router.push('/reset/password')">忘记密码</div>
                    </div>

                    <div style="display: flex;justify-content: center;width:100% ;"></div>
                    <div class="social">第三方登录</div>
                    <ul>
                        <li v-for="(social,index) in socialList" :key="index">
                            <el-tooltip  effect="dark" :content="social.text" placement="bottom">
                                <span :class="'iconfont '+social.icon" :style="{'color':social.color}"></span>
                            </el-tooltip>
                            
                            
                        </li>
                        
                    </ul>
                   
                   
                </div>
                
                

            </div>
        </div>
    </div>
  
</template>

<script>
import LoginForm from '@/components/plugs/login-form/LoginForm.vue';



export default {
    

    data(){

        return{
            
            granter:{
                clientId:'',
                clientSecret:'',
                types:[
                    {name:'captcha',text:'账号登录'},
                    {name:'sms',text:'手机号登录'}
                ],
                active:0
            },

            socialList:[
                {
                    authorize:'',
                    icon:'icon-gitee',
                    color:'red',
                    text:'Gitee授权',
                },
                {
                    authorize:'',
                    icon:'icon-GitHub',
                    color:'#000',
                    text:'GitHub授权',
                },
                {
                    authorize:'',
                    icon:'icon-weixin',
                    color:'#62b900',
                    text:'微信授权',
                },
                {
                    authorize:'',
                    icon:'icon-QQ',
                    color:'#409EFF',
                    text:'QQ授权',
                }

            ]

        }

    },
    methods:{
        changeGranterType(index){
            
            this.granter.active=index;
        }

    },
    components:{
        'login-form':LoginForm
    },
    created(){

    }

}
</script>

<style  scoped>
.form-box{
    width: 100%;
    min-height: 100vh;
    background-color: rgb(245, 245, 245);
    display: flex;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.form-main{
    width: 1000px;
    margin: 0 auto;
    /* background-color: #fff; */
    -webkit-box-shadow: -4px 5px 10px rgba(0,0,0,.4);
    box-shadow: -4px 5px 10px rgba(0,0,0,.4);
    justify-content: center;
    display: flex;
    animation: wrapper-gradient 800ms linear;
   
}

@keyframes wrapper-gradient{
    0%, 60%, 75%, 90%, 100% {
    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
    animation-timing-function: cubic-bezier(.215,.61,.355,1);
}
0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-3000px,0);
    transform: translate3d(0,-3000px,0);
}

60% {
    opacity: 1;
    -webkit-transform: translate3d(0,25px,0);
    transform: translate3d(0,25px,0);
}
75% {
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}
90% {
    -webkit-transform: translate3d(0,5px,0);
    transform: translate3d(0,5px,0);
}
100% {
    -webkit-transform: none;
    transform: none;
}

}

.form-left{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    

    background-color: #8b9aac;
    width: 50%;
}
.form-reght{
    /* border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; */
    /* border-top-right-radius: 20px; */
    width: 50%;
    background-color: #fff;
}
.form-content{
    margin-top: 70px;
    /* margin:auto 0 ; */
    width: 50%;
    
}

.form-left,.form-reght{
    min-height: 540px;
    display: flex;
    justify-content: center;
    
}


.form-title{
    margin-top: 40px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
    letter-spacing: 4px;
}

.title {
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 2px;
}
.granter{
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    letter-spacing: 4px;
    display: flex;
    
    justify-content: space-around;
}

.is-active{
   
    border-bottom: 3px solid #8b9aac;
}    

.forget{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #999;

}
.forget-username:hover{
    cursor:pointer;

}

.forget-password:hover{
    cursor:pointer;
}
.social::after,.social::before{
    content: '';
    display: table-cell;
    position: relative;

    width: 34%;
    background-repeat: no-repeat;
    box-sizing: inherit;
    background-position:  50%;
   
    /* justify-items: center;
    align-items: center; */
    /* background-position: right 1em top 50%; */
    
    color: #000;
    background-image: url('');
}


.social{
    margin-top: 20px;
   display: flex;
   justify-content: space-between;
    text-align: center;
    color: #999;
    font-size: 14px;
    
       
}

ul{
    
    width: 100%;
    list-style:none;  
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border: 0;
    margin-top: 10px;
    margin-bottom: 20px;
}



ul>li{
    width: 40px;
    height: 40px;
   
    cursor:pointer;
   
}

li>span{
    font-size: 40px;
}




</style>